<template>
  <Layout class="home-contanier" v-loading="$store.state.isLoading">
    <template #content>
        <Content v-if="!$store.state.isLoading"></Content>
    </template>

    <template #footer>
      <CityChoose @chooseDone="handleChoose"></CityChoose>
    </template>
  </Layout>
</template>

<script>
import Layout from "@/components/Layout";
import CityChoose from "@/components/CityChoose";
import Content from '@/components/Content';

export default {
  name: 'Home',
  components: {
    Layout,
    CityChoose,
    Content
  },
  data() {
    return {
    }
  },
  async created() {
    await this.$store.dispatch('getCityData');
    await this.$store.dispatch('initOptions');
    await this.$store.dispatch('getWetherData');
  },
  methods: {
    handleChoose() {
      this.$store.dispatch('getWetherData');
    }
  }
}
</script>

<style scoped lang="less">
.home-contanier{
  background-color: #eee;
}
</style>